<template>
  <div>
    <div id="register-header">
      <span class="huitui" @click="back()"
        ><span class="iconfont zuojiantou"></span
      ></span>

      <h3>账号注册</h3>
    </div>

    <div id="register-center">
      <img src="../../assets/img/yzk-img/youkulogo_03.gif" />
      <h4>注册优酷，享受精彩世界</h4>
    </div>

    <div id="register-shuru">
      <input type="text" placeholder="用户名" v-model="username" />
      <input type="password" placeholder="密码" v-model="userpass" />
      <input type="button" value="注册" @click="regSave" />
    </div>

    <div id="register-xieyi">
      <input type="checkbox" />
      已同意并阅读《用户协议》《隐私政策》 《儿<br />童隐私协议》
    </div>

    <div id="register-footer">
      <p>阳光&nbsp;·&nbsp;理性&nbsp;·&nbsp;平和&nbsp;·&nbsp;友善</p>
      <a href="https://gitee.com/kalrry/youku">kalrry项目地址</a>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";

export default {
  name: "Register",
  data: function () {
    return {
      username: "",
      userpass: "",
    };
  },
  methods: {
    // kalrry修改于11-1-14:42
    back() {
      this.$router.back();
    },
    regSave() {

      if(this)
       //1.非空判断
      if (this.username == "" && this.userpass=="") {
        Toast.fail("未输入用户名或密码");
      }
      //2)、格式判断
      // 用户名有数字，字母下划线组成，但不能以数字开头，2-10位
      let reg = /^[a-zA-Z_]\w{1,9}$/;
      let reg1 = /^\d{6,16}$/;
      if (!(reg.test(this.username) && reg1.test(this.userpass))) {
       Toast.fail("用户名或密码格式错误");
      } else {
        axios({
          url: "/my/register",
          method: "post",
          data: `username=${this.username}&userpass=${this.userpass}`,
        }).then((res) => {
          console.log("res.data", res.data);
          if (res.data) {
            // 注册成功！
            Toast.success("注册成功！");

            // 跳回来的页面
            this.$router.push("/Login"); //修改：跳转到首页
          } else {
            Toast.fail("用户名或者密码重复！");
          }
        });
      }
    },
  },
};
</script>

<style scoped>
@import url(../../assets/iconfont/iconfont.css);

#register-header {
  width: 100%;
  height: 0.76rem;
  display: flex;
  line-height: 0.76rem;
  padding-left: 0.2rem;
  box-sizing: border-box;
}
#register-header h3 {
  margin-left: 1.34rem;
}

#register-center {
  width: 100%;
  height: 1.45rem;
  text-align: center;
}
#register-center img {
  text-align: center;
  width: 2.3rem;
  height: 0.42rem;
  margin-top: 0.3rem;
}
#register-center h4 {
  font-size: 0.23rem;
  margin-top: 0.2rem;
}
#register-shuru {
  width: 100%;
  height: 2.2rem;
  text-align: center;
}

#register-shuru input {
  width: 3.56rem;
  height: 0.54rem;
}
#register-shuru input:nth-child(1) {
  margin-top: 0.2rem;
  border: none;
  border-bottom: #e1e1e1 solid 0.02rem;
  /* color: #e1e1e1; */
  font-size: 0.16rem;
}
#register-shuru input:nth-child(2) {
  border: none;
  border-bottom: #e1e1e1 solid 0.02rem;
  /* color: #e1e1e1; */
  font-size: 0.16rem;
}
#register-shuru input:nth-child(3) {
  margin-top: 0.3rem;
  border-radius: 0.3rem;
  background-color: #ee86c1;
  border: none;
  color: #f9c7ec;
}

#register-xieyi {
  width: 100%;
  height: 0.6rem;
  box-sizing: border-box;
  margin-top: 0.16rem;
  font-size: 0.16rem;
  text-align: center;
}

#register-footer {
  width: 100%;
  height: 1.22rem;
  margin-top: 0.97rem;
  padding-top: 0.8rem;
  box-sizing: border-box;
  font-size: 0.12rem;
  color: #e1e1e1;
  text-align: center;
}
</style>